<template>
  <div>
    <Card>
      <tables ref="tables" :loading="loading" editable searchable search-place="top" v-model="tableData" :columns="columns" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="totalPage" :page-size="size" :current="1" @on-change="changePage"></Page>
        </div>
    </div>
    </Card>
    
  </div>
</template>

<script>
import Tables from "_c/tables";
import { getMerchantsActivities,activityAudit } from "@/api/merchants";
import ActivityDetail from "./activity-detail";
import ApplyList from "./applylist"
export default {
  name: "tables_page",
  components: {
    Tables,
    ActivityDetail,
    ApplyList
  },
  data() {
    return {
      columns: [
        {
          title: "活动发起商户",
          key: "merchants",
          searchable: false,
          render(h, params) {
            return h("span", params.row.merchants.merchants_name);
          }
        },
        { title: "活动标题", key: "title" },
        { title: "创建时间", key: "create_time", sortable: true },
        {
          title: "审核",
          key: "state",
          sortable: true,
          render: (h, params) => {
            const row = params.row;
            const color =
              row.state === 0
                ? "primary"
                : row.state === 1
                  ? "success"
                  : "error";
            const text =
              row.state === 0
                ? "待审核"
                : row.state === 1
                  ? "已审核"
                  : "审核拒绝";
            return h(
              "Button",
              {
                props: {
                  type: color,
                  size: "small"
                },
                on: {
                  click: () => {
                    this.audit(row);
                  }
                }
              },
              text
            );
          }
        },
        {
          title: "操作",
          key: "action",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small",
                    type: "success"
                  },
                  on: {
                    click: () => {
                      this.show(params.row);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    size: "small",
                    type: "default"
                  },
                  style:{
                    marginLeft: '5px'
                  },
                  on: {
                    click: () => {
                      this.applylist(params.row);
                    }
                  }
                },
                "核销列表"
              )
            ]);
          }
        }
      ],
      tableData: [],
      totalPage: 0,
      size: 10,
      loading: true
    };
  },
  methods: {
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    },
    changePage(e) {
      const page = e;
      const size = this.size;
      this.loading = true;
      getMerchantsActivities({ page, size }).then(res => {
        this.tableData = res.data.data.data;
        this.loading = false;
      });
    },
    show(params) {
      this.$Modal.info({
        title: "活动详情",

        render: h => {
          return h(ActivityDetail, {
            props: {
              row: params
            }
          });
        }
      });
    },
    audit(row) {
      const page = this.page;
      const size = this.size;
      const params = row;
      const id = params.id;
      const index = params.initRowIndex;
      activityAudit({ id }).then(res => {
        this.tableData[index].state = 1;
      });
    },
    applylist(params){
      this.$Modal.info({
        title: "已核销会员",
        width:'800px',
        render: h => {
          return h(ApplyList, {
            props: {
              activity_id:params.id,
            }
          });
        }
      });
    }
  },
  mounted() {
    const page = 1;
    const size = this.size;
    getMerchantsActivities({ page, size }).then(res => {
      this.totalPage = res.data.data.total;
      this.tableData = res.data.data.data;
      this.loading = false;
    });
  }
};
</script>

<style>
</style>
